<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手写签到工具</title>
    <link href="../css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #165DFF;
            --primary-light: #E8F3FF;
            --secondary-color: #00B42A;
            --danger-color: #F53F3F;
            --warning-color: #FF7D00;
            --light-color: #F9FAFB;
            --light-gray: #F2F3F5;
            --medium-gray: #E5E6EB;
            --dark-gray: #C9CDD4;
            --text-color: #1D2129;
            --text-secondary: #4E5969;
            --border-color: #E5E6EB;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            --shadow-hover: 0 8px 24px rgba(22, 93, 255, 0.15);
            --radius: 12px;
            --transition: all 0.3s ease;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
            width: 90%;
            margin: 0 auto;
            padding: 20px;
            background-color: #F7F8FA;
            color: var(--text-color);
            line-height: 1.6;
        }
        
        /* 标题样式 */
        h1, h2, h3 {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 16px;
        }
        
        h1 {
            font-size: 1.8rem;
            padding-bottom: 12px;
            border-bottom: 2px solid var(--primary-light);
            text-align: center;
        }
        
        h2 {
            font-size: 1.4rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        h3 {
            font-size: 1.2rem;
            color: var(--text-color);
        }
        
        /* 卡片设计 */
        .card {
            background: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 30px;
            margin-bottom: 30px;
            transition: var(--transition);
            border: 1px solid var(--medium-gray);
            display: flex;
        }
        
        .card:hover {
            box-shadow: var(--shadow-hover);
            transform: translateY(-2px);
        }
        
        /* 签名容器 */
        .signature-container {
            position: relative;
            margin-bottom: 30px;
            width: 30%;
        }
        
        #signatureCanvas {
            background-color: white;
            cursor: crosshair;
            width: 100%;
            height: 150px;
            border-radius: var(--radius);
            border: 2px dashed var(--medium-gray);
            transition: var(--transition);
        }
        
        #signatureCanvas:hover {
            border-color: var(--primary-light);
        }
        
        /* 表单控件 */
        .controls {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin: 24px 0;
        }
        
        .input-group {
            flex: 1;
            min-width: 240px;
            position: relative;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text-color);
            font-size: 0.95rem;
        }
        
        .required-field::after {
            content: " *";
            color: var(--danger-color);
        }
        
        input[type="text"], 
        input[type="date"], 
        input[type="tel"], 
        textarea {
            width: 100%;
            padding: 14px 16px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 1rem;
            transition: var(--transition);
            background-color: white;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
        }
        
        input[type="text"]:focus, 
        input[type="date"]:focus, 
        input[type="tel"]:focus, 
        textarea:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.15);
        }
        
        textarea {
            min-height: 80px;
            resize: vertical;
            font-family: inherit;
        }
        
        /* 按钮设计 */
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            width: 100%;
            font-family: inherit;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #0D47A1;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(22, 93, 255, 0.3);
        }
        
        .btn-success {
            background-color: var(--secondary-color);
            color: white;
        }
        
        .btn-success:hover {
            background-color: #00801A;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 180, 42, 0.3);
        }
        
        .btn-danger {
            background-color: var(--danger-color);
            color: white;
        }
        
        .btn-danger:hover {
            background-color: #C51F2D;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(245, 63, 63, 0.3);
        }
        
        .btn-group {
            display: flex;
            gap: 16px;
            width: 100%;
        }
        
        .btn-sm {
            padding: 8px 16px;
            font-size: 0.9rem;
            border-radius: 4px;
        }
        
        /* 签名列表 */
        .signature-list {
            margin-top: 40px;
            margin-left: 40px;
            width: 70%;
        }
        
        .editable-title {
            display: none;
        }
        
        /* 表格设计 */
        .signature-table {
            width: 100%;
            border-collapse: collapse;
            overflow: hidden;
        }
        
        .signature-table caption {
            background-color: var(--primary-color);
            color: white;
            font-size: 1.5rem;
            font-weight: 600;
            padding: 16px;
            text-align: center;
        }
        
        .signature-table th {
            background-color: var(--primary-color);
            color: white;
            padding: 16px;
            text-align: center;
            font-weight: 500;
            font-size: 0.95rem;
            position: relative;
        }
        
        .signature-table th::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: rgba(255, 255, 255, 0.2);
        }
        
        .signature-table td {
            padding: 16px;
            border-bottom: 1px solid var(--medium-gray);
            vertical-align: middle;
            font-size: 0.95rem;
            color: var(--text-secondary);
            background:#fff;
            text-align: center;
        }
        
        .signature-table tr:last-child td {
            border-bottom: none;
        }
        
        .signature-table tr:nth-child(even) {
            background-color: var(--light-gray);
        }
        
        .signature-table tr:hover {
            background-color: var(--primary-light);
        }
        
        .signature-image {
            height: 80px;
            object-fit: contain;
            background-color: white;
            padding: 8px;
        }
        
        .empty-state {
            text-align: center;
            padding: 40px;
            color: var(--text-secondary);
            background-color: var(--light-gray);
            border-radius: var(--radius);
            border: 2px dashed var(--medium-gray);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 200px;
            margin-top: 20px;
        }
        
        .empty-state i {
            font-size: 3rem;
            color: var(--dark-gray);
            margin-bottom: 16px;
        }
        
        .no-print {
            display: block;
        }
        
        .print-header {
            display: none;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .controls {
                flex-direction: column;
            }
            
            .input-group {
                width: 100%;
            }
            
            .btn-group {
                flex-direction: column;
                gap: 12px;
            }
            
            .btn {
                width: 100%;
            }
            
            .fixed-btn-container {
                position: fixed;
                bottom: 20px;
                right: 20px;
                display: flex;
                flex-direction: column;
                gap: 12px;
                z-index: 100;
            }
            
            .card {
                padding: 20px;
            }
        }
        
        @media (min-width: 769px) {
            .fixed-btn-container {
                position: fixed;
                top: 50%;
                right: 20px;
                transform: translateY(-50%);
                display: flex;
                flex-direction: column;
                gap: 12px;
                z-index: 100;
            }
        }
        
        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 200;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .modal-content {
            background-color: white;
            border-radius: var(--radius);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
            padding: 32px;
            width: 90%;
            max-width: 500px;
            position: relative;
            animation: slideIn 0.3s ease;
        }
        
        @keyframes slideIn {
            from { transform: translateY(-30px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--medium-gray);
        }
        
        .modal-title {
            font-size: 1.3rem;
            color: var(--text-color);
            margin: 0;
            font-weight: 600;
        }
        
        .close-modal {
            background: none;
            border: none;
            font-size: 1.5rem;
            color: var(--dark-gray);
            cursor: pointer;
            transition: var(--transition);
        }
        
        .close-modal:hover {
            color: var(--text-color);
        }
        
        .modal-body {
            margin-bottom: 24px;
            line-height: 1.6;
            color: var(--text-secondary);
        }
        
        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
        }
        
        /* 打印样式 */
        @media print {
            body * {
                visibility: hidden;
            }
            .printable, .printable * {
                visibility: visible;
            }
            .printable {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                padding: 20px;
            }
            .signature-table {
                box-shadow: none;
                border: 1px solid var(--border-color);
            }
            .signature-table caption {
                background-color: var(--primary-color) !important;
                color: white !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
            .signature-table th {
                background-color: var(--primary-color) !important;
                color: white !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
            .card {
                box-shadow: none;
                border: 1px solid var(--border-color);
                padding: 0;
            }
            .print-header {
                display: none;
            }
            .fixed-btn-container, .signature-container {
                display: none;
            }
        }
        
        /* 加载动画 */
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
            margin-right: 8px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="card">
        <div class="signature-container">
            <h2><i class="fas fa-user-check"></i> 签到信息</h2>
            <div class="controls">
                <div class="input-group">
                    <label for="nameInput" class="required-field">姓名</label>
                    <input type="text" id="nameInput" placeholder="请输入您的姓名" required>
                </div>
                <div class="input-group">
                    <label for="phoneInput">手机号码</label>
                    <input type="tel" id="phoneInput" placeholder="请输入手机号码" pattern="[0-9]{11}">
                </div>
                <div class="input-group">
                    <label for="dateInput">签到日期</label>
                    <input type="date" id="dateInput">
                </div>
            </div>
            <div class="controls">
                <div class="input-group">
                    <label for="remarkInput">备注</label>
                    <textarea id="remarkInput" placeholder="可填写备注信息"></textarea>
                </div>
            </div>
            <h2><i class="fas fa-signature"></i> 请在下方签名</h2>
            <canvas id="signatureCanvas"></canvas>
        </div>
        
        <div class="signature-list">
            <div id="signaturesContainer">
                <div class="empty-state" id="emptyState">
                    <i class="far fa-file-alt"></i>
                    <p>暂无签到记录</p>
                    <p>请在上方签名</p>
                </div>
                <table class="signature-table printable" id="signatureTable" style="display: none;">
                    <caption id="tableTitle">签到记录表</caption>
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>姓名</th>
                            <th>手机号码</th>
                            <th>签名</th>
                            <th>签到日期</th>
                            <th>签到时间</th>
                            <th>备注</th>
                        </tr>
                    </thead>
                    <tbody id="signatureTableBody">
                        <!-- 动态添加签到记录 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 打印时的标题 -->
    <div class="print-header printable">
        <h1 id="printTitle">签到记录表</h1>
    </div>
    
    <!-- 固定按钮容器 -->
    <div class="fixed-btn-container no-print">
        <button id="clearBtn" class="btn btn-danger">
            <i class="fas fa-eraser" aria-hidden="true"></i>
            清除签名
        </button>
        <button id="saveBtn" class="btn btn-success">
            <i class="fa fa-check" aria-hidden="true"></i>
            确认签到
        </button>
        <button id="printBtn" class="btn btn-primary">
            <i class="fa fa-print" aria-hidden="true"></i>
            打印签到表
        </button>
    </div>
    
    <!-- 模态框 -->
    <div class="modal" id="messageModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modalTitle">提示</h3>
                <button class="close-modal" id="closeModal">×</button>
            </div>
            <div class="modal-body" id="modalBody">
                这是一个提示信息
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" id="confirmBtn">确定</button>
            </div>
        </div>
    </div>

    <script>
        // 获取Canvas元素和上下文
        const canvas = document.getElementById('signatureCanvas');
        const ctx = canvas.getContext('2d');
        
        // 模态框元素
        const modal = document.getElementById('messageModal');
        const modalTitle = document.getElementById('modalTitle');
        const modalBody = document.getElementById('modalBody');
        const closeModal = document.getElementById('closeModal');
        const confirmBtn = document.getElementById('confirmBtn');
        
        // 加载状态元素
        const saveBtn = document.getElementById('saveBtn');
        const originalSaveBtnText = saveBtn.innerHTML;
        
        // 显示模态框
        function showModal(title, message) {
            modalTitle.textContent = title;
            modalBody.textContent = message;
            modal.style.display = 'flex';
        }
        
        // 显示加载状态
        function showLoading(button) {
            const loadingIcon = document.createElement('span');
            loadingIcon.className = 'loading';
            const originalText = button.innerHTML;
            button.disabled = true;
            button.innerHTML = '';
            button.appendChild(loadingIcon);
            return { button, originalText };
        }
        
        // 隐藏加载状态
        function hideLoading(state) {
            state.button.innerHTML = state.originalText;
            state.button.disabled = false;
        }
        
        // 隐藏模态框
        function hideModal() {
            modal.style.display = 'none';
        }
        
        // 调整Canvas大小以适应容器
        function resizeCanvas() {
            const container = canvas.parentElement;
            canvas.width = container.offsetWidth;
            canvas.height = 150;
            // 设置白色背景
            ctx.fillStyle = 'white';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            redrawSignature(); // 如果有签名，重新绘制
        }
        
        // 初始化时调整大小
        window.addEventListener('load', function() {
            resizeCanvas();
            // 设置默认日期为今天
            const today = new Date().toISOString().split('T')[0];
            document.getElementById('dateInput').value = today;
            
            // 绑定模态框事件
            closeModal.addEventListener('click', hideModal);
            confirmBtn.addEventListener('click', hideModal);
            modal.addEventListener('click', function(e) {
                if (e.target === modal) {
                    hideModal();
                }
            });
        });
        
        window.addEventListener('resize', resizeCanvas);
        
        // 设置初始绘图状态
        let isDrawing = false;
        let lastX = 0;
        let lastY = 0;
        let savedSignature = null;
        
        // 设置画笔样式
        ctx.strokeStyle = '#000';
        ctx.lineWidth = 2;
        ctx.lineJoin = 'round';
        ctx.lineCap = 'round';
        
        // 鼠标/触摸事件处理
        canvas.addEventListener('mousedown', startDrawing);
        canvas.addEventListener('mousemove', draw);
        canvas.addEventListener('mouseup', stopDrawing);
        canvas.addEventListener('mouseout', stopDrawing);
        
        // 触摸设备支持
        canvas.addEventListener('touchstart', handleTouchStart);
        canvas.addEventListener('touchmove', handleTouchMove);
        canvas.addEventListener('touchend', stopDrawing);
        
        function startDrawing(e) {
            isDrawing = true;
            [lastX, lastY] = getCoordinates(e);
        }
        
        function draw(e) {
            if (!isDrawing) return;
            
            ctx.beginPath();
            ctx.moveTo(lastX, lastY);
            [lastX, lastY] = getCoordinates(e);
            ctx.lineTo(lastX, lastY);
            ctx.stroke();
        }
        
        function stopDrawing() {
            isDrawing = false;
            savedSignature = canvas.toDataURL(); // 当前签名
        }
        
        function redrawSignature() {
            if (savedSignature) {
                const img = new Image();
                img.onload = function() {
                    ctx.fillStyle = 'white';
                    ctx.fillRect(0, 0, canvas.width, canvas.height);
                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                };
                img.src = savedSignature;
            } else {
                // 确保背景是白色
                ctx.fillStyle = 'white';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
            }
        }
        
        function handleTouchStart(e) {
            e.preventDefault();
            const touch = e.touches[0];
            const mouseEvent = new MouseEvent('mousedown', {
                clientX: touch.clientX,
                clientY: touch.clientY
            });
            startDrawing(mouseEvent);
        }
        
        function handleTouchMove(e) {
            e.preventDefault();
            const touch = e.touches[0];
            const mouseEvent = new MouseEvent('mousemove', {
                clientX: touch.clientX,
                clientY: touch.clientY
            });
            draw(mouseEvent);
        }
        
        function getCoordinates(e) {
            const rect = canvas.getBoundingClientRect();
            let x, y;
            
            if (e.type.includes('touch')) {
                x = e.touches[0].clientX - rect.left;
                y = e.touches[0].clientY - rect.top;
            } else {
                x = e.clientX - rect.left;
                y = e.clientY - rect.top;
            }
            
            return [x, y];
        }
        
        // 清除按钮功能
        document.getElementById('clearBtn').addEventListener('click', function() {
            ctx.fillStyle = 'white';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            savedSignature = null;
        });
        
        document.getElementById('saveBtn').addEventListener('click', function() {
            const name = document.getElementById('nameInput').value.trim();
            const phone = document.getElementById('phoneInput').value.trim();
            let date = document.getElementById('dateInput').value;
            const remark = document.getElementById('remarkInput').value.trim();
            
            if (!name) {
                showModal('提示', '请输入您的姓名');
                return;
            }
            
            // 验证手机号码格式
            if (phone && !/^[0-9]{11}$/.test(phone)) {
                showModal('提示', '请输入正确的11位手机号码');
                return;
            }
            
            // 如果没有选择日期，使用当前日期
            if (!date) {
                const today = new Date();
                date = today.toISOString().split('T')[0];
                document.getElementById('dateInput').value = date;
            }
            
            // 检查是否有签名
            const blankCanvas = document.createElement('canvas');
            blankCanvas.width = canvas.width;
            blankCanvas.height = canvas.height;
            const blankCtx = blankCanvas.getContext('2d');
            blankCtx.fillStyle = 'white';
            blankCtx.fillRect(0, 0, blankCanvas.width, blankCanvas.height);
            
            if (!savedSignature || canvas.toDataURL() === blankCanvas.toDataURL()) {
                showModal('提示', '请先签名');
                return;
            }
            
            // 显示加载状态
            const loadingState = showLoading(this);
            
            // 模拟网络延迟
            setTimeout(() => {
                // 签名列表
                saveSignature(name, phone, date, remark, savedSignature);
                
                // 清除当前签名和表单
                ctx.fillStyle = 'white';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                document.getElementById('nameInput').value = '';
                document.getElementById('phoneInput').value = '';
                document.getElementById('remarkInput').value = '';
                savedSignature = null;
                
                // 隐藏加载状态并显示成功提示
                hideLoading(loadingState);
                showModal('成功', '签到成功');
            }, 800);
        });
        
        // 打印按钮功能
        document.getElementById('printBtn').addEventListener('click', function() {
            // 检查是否有签到记录
            if (document.querySelectorAll('#signatureTableBody tr').length === 0) {
                showModal('提示', '没有可打印的签到记录');
                return;
            }
            
            // 保存当前滚动位置
            const scrollPosition = window.scrollY;
            
            // 打印前确保表格在视图内
            document.getElementById('signatureTable').scrollIntoView();
            
            // 执行打印
            window.print();
            
            // 恢复滚动位置
            window.scrollTo(0, scrollPosition);
        });
        
        // 签名列表
        function saveSignature(name, phone, date, remark, signatureData) {
            const signaturesContainer = document.getElementById('signaturesContainer');
            const emptyState = document.getElementById('emptyState');
            const signatureTable = document.getElementById('signatureTable');
            const signatureTableBody = document.getElementById('signatureTableBody');
            
            // 隐藏空状态提示，显示表格
            if (emptyState) {
                emptyState.style.display = 'none';
            }
            signatureTable.style.display = 'table';
            
            const now = new Date();
            const timestamp = now.toLocaleString();
            const formattedDate = formatDate(date);
            
            // 创建表格行
            const row = document.createElement('tr');
            const rowCount = signatureTableBody.children.length + 1;
            
            row.innerHTML = `
                <td>${rowCount}</td>
                <td>${name}</td>
                <td>${phone || '-'}</td>
                <td><img src="${signatureData}" alt="${name}的签名" class="signature-image"></td>
                <td>${formattedDate}</td>
                <td>${timestamp}</td>
                <td>${remark || '-'}</td>
            `;
            
            signatureTableBody.append(row);
        }
        
        // 格式化日期显示
        function formatDate(dateString) {
            const date = new Date(dateString);
            return date.toLocaleDateString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit'
            });
        }
    </script>
</body>
</html>